import React, { JSX } from "react";
import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
import { useAppSelector } from "../actions/hooks";
import { selectRouterActivated, selectRouterNavigation } from "../actions/Router";
import Login from "../pages/Login";
import MainFramework from "../pages/MainFramework";
import Register from "../pages/Register";

function NulRoutes(): JSX.Element {

  const navigate = useNavigate();

  const navigation = useAppSelector(selectRouterNavigation);
  const navigationActivated = useAppSelector(selectRouterActivated);

  React.useEffect(() => {
    if(navigationActivated) {
      navigate(navigation.url, { state: navigation.state });
    }
  }, [navigationActivated, navigation, navigate]);

  return (
    <Routes>
      <Route path='*' element={<Navigate replace to='/login' />} />
      <Route path='/login' element={<Login />} />
      <Route path='/register' element={<Register/>} />
      <Route path='/main/:id' element={<MainFramework />} />
    </Routes>
  );
}

export default NulRoutes;